<script setup lang="ts">
import { inject, ref, reactive } from 'vue';
import { switchLoginModelShowKey, getUserInfoKey, popMessageKey, popMessage } from '@/type';
import { useStore } from '../stores/index'
import { getMyMusicList } from '@api';
import axios from '../plugins/axiosInstance';
defineProps(['modelTitle', 'firstPlaceholder', 'secondPlaceholder', 'buttonText'])
// 获取Url
const store = useStore()
const BaseUrl = store.getBaseUrl()
// 关闭显示此模态框的 emit
const switchShow = inject(switchLoginModelShowKey) as () => void
const getUserInfo = inject(getUserInfoKey) as () => void
const popMessage = inject(popMessageKey) as popMessage
// 登陆
const login = () => {
    axios.post(BaseUrl + '/user/login/account', {
        account: loginUser.account,
        password: loginUser.password
    }).then(res => {
        if (res.data.code === 1) {
            switchShow()
            store.setUserAccount(loginUser.account);
            getUserInfo()
            popMessage('登陆成功', 'success')
            store.Login()
            getMyMusicList()
        } else {
            popMessage('错误的账号或密码', 'error')
        }
    }).catch(res => {
        // 可能的网络错误？
        console.log(res);

    })
}

// 是否为显示注册页面
const isRegister = ref(false)
// 注册信息
const user = reactive({
    account: '',
    password: '',
    nickName: '',
    email: '',
    phone: '',
    Phonecode: '',
    accountIsLegal: true,
    phoneIsLegal: true
})
// 登陆信息
const loginUser = reactive({
    account: '',
    password: ''
})
// 切换注册页面显示状态
const switchRegister = () => {
    isRegister.value = !isRegister.value
}
// 检查账号是否已被注册
const checkAccount = () => {
    axios.get(BaseUrl + "/user/login/checkAccount", { params: { account: user.account } })
        .then((res) => {
            if (res.data.code === 0) {
                user.accountIsLegal = false
            } else {
                user.accountIsLegal = true
            }
        })
}
const checkPhone = () => {
    axios.get(BaseUrl + "/user/register/checkPhone", { params: { phone: user.phone } })
        .then((res) => {
            if (res.data.code === 0) {
                user.phoneIsLegal = false
            } else {
                user.phoneIsLegal = true
            }
        })
}
const model = ref<any>(null)
const mask = ref<any>(null)

const clickModel = (e: MouseEvent) => {
    const startXY = [e.clientX - model.value.offsetLeft, e.clientY - model.value.offsetTop]
    const moveModel = (e: MouseEvent) => {
        model.value.style.left = e.clientX - startXY[0] + 'px'
        model.value.style.top = e.clientY - startXY[1] + 'px'
    }
    mask.value.addEventListener('mousemove', moveModel)
    model.value.addEventListener('mouseup', () => {
        mask.value.removeEventListener('mousemove', moveModel)
    })
}

// 注册
const register = () => {
    if (!user.accountIsLegal || !user.phoneIsLegal) {
        popMessage("账号或手机号已被注册", 'error')
        return
    }
    axios.post(BaseUrl + "/user/register", {
        account: user.account,
        password: user.password,
        name: user.nickName,
        email: user.email,
        phone: user.phone,
    }).then(res => {
        if (res.data.code === 1) {
            popMessage("注册成功", 'success')
            switchRegister()
        }
    })
}
</script>
<template>
    <div class="mask" ref="mask">
        <div class="loginBox" ref="model">
            <div class="title" @mousedown="clickModel">
                <div v-if="!isRegister">{{ modelTitle }}<i @click="switchShow">X</i></div>
                <div v-show="isRegister">注册
                    <i @click="switchShow">X</i>
                    <i @click="switchRegister">&lt;</i>
                </div>
            </div>
            <div class="userInfo" v-if="!isRegister">
                <div class="userName">
                    <img src="../assets/user.svg" class="userIcon" alt="密码图标">
                    <input v-model="loginUser.account" type="text" :placeholder="firstPlaceholder">
                </div>
                <div class="password">
                    <img src="../assets/password.svg" class="passwordIcon" alt="密码图标">
                    <input v-model="loginUser.password" type="password" :placeholder="secondPlaceholder">
                </div>
                <div class="loginBtn">
                    <button @click="login">{{ buttonText }}</button>
                </div>
            </div>
            <div class="register" v-if="!isRegister">
                <a @click="switchRegister">注册</a>
            </div>
            <template v-else>
                <div class="registerInfo">
                    <div>
                        <span>账号</span><input v-model="user.account" type="text" @focusout="checkAccount">
                        <span v-show="!user.accountIsLegal" class="accRegisted">已被注册</span>
                    </div>
                    <div>
                        <span>昵称</span><input v-model="user.nickName" type="text">
                    </div>
                    <div>
                        <span>密码</span><input v-model="user.password" type="password">
                    </div>
                    <div>
                        <span>邮箱</span><input v-model="user.email" type="text">
                    </div>
                    <div>
                        <span>手机号</span><input @focusout="checkPhone" v-model="user.phone" type="text">
                        <span v-show="!user.phoneIsLegal" class="phoneRegisted">已被注册</span>
                    </div>
                    <!-- <div>
                        <span>验证码</span><input v-model="user.Phonecode" type="text">
                    </div> -->
                </div>
                <div class="registerBtn">
                    <a @click="register">注册</a>
                </div>
            </template>


        </div>
    </div>
</template>

<style lang="css" scoped>
.phoneRegisted {
    bottom: 95px;
    margin-top: 12px;
    color: red;
    position: absolute;
    right: 225px;
}

.userIcon,
.passwordIcon {
    height: 25px;
    width: 25px;
}

.accRegisted {
    position: absolute;
    right: 225px;
    top: 65px;
    margin-top: 12px;
    color: red;
}

.registerBtn {
    text-decoration: none;
    color: #999999;
    text-align: center;
    padding-bottom: 30px;
}

.registerBtn a {
    border: 1px solid #999999;
    border-radius: 8px;
    padding: 2px 10px;
    cursor: pointer;
}

.registerBtn a:hover {
    border: 1px solid #666666;
}

.registerInfo {
    padding: 20px 20px 0 20px;
    display: flex;
    margin: 20px auto 0;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 440px;
}

.registerInfo div {
    width: 180px;
    display: flex;
    justify-content: space-between;
}


.registerInfo span {
    font-size: 14px;
}

.registerInfo input {
    width: 80px;
    height: 18px;
    margin-bottom: 30px;
    /* margin-left: 20px; */
}

.register a {
    display: block;
    text-align: right;
    margin: 0 5px 5px 0;
    text-decoration: none;
    color: #999999;
    cursor: pointer;
}

.mask {
    z-index: 9999;
    position: fixed;
    height: 110%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    top: -60px;
}

.loginBox .userInfo .loginBtn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.loginBox .userInfo .loginBtn button {
    text-align: center;
    width: 160px;
    height: 35px;
    border-radius: 20px 20px 20px 20px;
}

.loginBox .userInfo .userName,
.loginBox .userInfo .password {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loginBox .userInfo {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100px;
    margin: auto;
}

.loginBox .userInfo input {
    height: 20px;
    border-radius: 0 20px 20px 0;
}

.loginBox .userInfo .userName,
.loginBox .userInfo .password {
    text-align: center;
}

.loginBox .title i {
    font-size: 15px;
    color: #FFFFFF;
    cursor: pointer;
    float: right;
    margin-right: 20px;
    text-decoration: none;
    font-style: normal;
}

.loginBox .title {
    height: 35px;
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    line-height: 35px;
    padding-left: 20px;
    box-sizing: border-box;
    background-color: #2D2D2D;
    border-top: #242424;
    border-radius: 5px 5px 0 0;
}

.loginBox {
    --login-box-height: 300px;
    --login-box-width: 500px;
    position: absolute;
    display: flex;
    left: calc(50% - var(--login-box-width)/2);
    top: calc(50% - var(--login-box-height)/2);
    height: var(--login-box-height);
    width: var(--login-box-width);
    background-color: #FFFFFF;
    border-radius: 5px 5px 0 0;
    flex-direction: column;
}
</style>